﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JUI.js" type="text/javascript"></script>
    <script src="Logger.js" type="text/javascript"></script>
    <script src="Extension.js" type="text/javascript"></script>
    <script src="Utils.js" type="text/javascript"></script>

    <script src="DataSource/DataSource.js" type="text/javascript"></script>
    <script src="DataSource/WSDLDataSource.js" type="text/javascript"></script>

    <script src="DataAdapter/AdapterFactory.js" type="text/javascript"></script>
    <script src="DataAdapter/XMLDataAdapter.js" type="text/javascript"></script>
    <script src="DataAdapter/DataAdapter.js" type="text/javascript"></script>
    <script src="DataAdapter/JSONDataAdapter.js" type="text/javascript"></script>

    <script src="Events/OnTouchListener.js" type="text/javascript"></script>
    <script src="Events/OnFocusListener.js" type="text/javascript"></script>

    <script src="Repeater.js" type="text/javascript"></script>
</head>
<body>

    <div id="container" style="width: 300px; height: 600px;"></div>

    <script type="text/javascript" language="javascript">

        var data = [{ data: "First record" },
        { data: "Second record" },
        { data: "Third record" },
        { data: "Fourth record" }
        ];

        var repeater = new JUI.Repeater({

            containerElement: document.getElementById("container"),
            itemTemplate: "<span style='color:black;'>{data} has changed</span>",
            alternateItemTemplate: "<span style='color:green;'>{data}</span>",
            editTemplate: "<input type='text' value='{data}' style='width: 100%;'></input>",
            itemContainer: "div",
            dataSource: data,
            dataType: 'json',
            editable: true
        });
    </script>
</body>
</html>